<!--
 * @Author: C.
 * @Date: 2023-04-28 13:42:12
-->
<template>
  <Tooltip placement="top">
    <template #title>
      <span>导入</span>
    </template>
    <ImportOutlined @click="importClick" />
    <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD" v-show="false" ref="ImpExcelRef" />
    <BasicModal
      v-model:visible="visibleRef"
      title="导入工作项"
      @ok="toImport"
      width="70%"
      :loading="loading"
      loadingTip="正在导入,请稍等..."
    >
      <BasicTable
        ref="BasicTableRef"
        :title="tableListRef.title"
        :columns="columns"
        :dataSource="tableListRef.dataSource"
        :scroll="{ y: 500, x: 1500 }"
        :autoCreateKey="true"
      >
        <template #toolbar>
          <a-button type="primary" @click="toCpnImport">Reimport</a-button>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  icon: 'ant-design:delete-outlined',
                  color: 'error',
                  tooltip: t('common.delText'),
                  popConfirm: {
                    title: t('common.isDel'),
                    placement: 'left',
                    confirm: handleDelete.bind(null, record),
                  },
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </BasicModal>
  </Tooltip>
</template>
<script lang="ts" setup name="ImportSetting">
  // ----------------------------- 第三方引入 -----------------------------
  import { ref, reactive, computed } from 'vue';
  import { ImportOutlined } from '@ant-design/icons-vue';
  import { Tooltip } from 'ant-design-vue';
  // import { omit } from 'lodash-es';

  // ----------------------------- hooks -----------------------------
  import { useTableContext } from '../../hooks/useTableContext';
  import { useI18n } from '/@/hooks/web/useI18n';

  // ----------------------------- 组件 -----------------------------
  import { BasicModal } from '/@/components/Modal';
  import { ImpExcel, ExcelData } from '/@/components/Excel';
  import { BasicTable, TableAction, TableActionType, BasicColumn } from '/@/components/Table';
  // ----------------------------- 其他引入 -----------------------------

  //----------------------------- 变量声明区 -----------------------------
  const visibleRef = ref<boolean>(false);
  const loading = ref<boolean>(false);
  const ImpExcelRef = ref<Nullable<{ handleUpload: Fn }>>(null);
  const BasicTableRef = ref<Nullable<TableActionType>>(null);
  const isUploaded = ref<boolean>(false);
  const tableListRef = reactive<{
    title: string;
    dataSource?: Recordable[];
  }>({
    title: '',
    dataSource: [],
  });
  // ----------------------------- hooks使用区 -----------------------------
  const table = useTableContext();
  const { t } = useI18n();

  const columns = computed<BasicColumn[]>(() => {
    return table?.getColumns?.({ ignoreIndex: true }) ?? [];
  });
  // defaultHidden
  // ----------------------------- 钩子函数区 -----------------------------

  //  ----------------------------- 自定义方法区 -----------------------------

  function loadDataSuccess(excelDataList: ExcelData[]) {
    console.log(excelDataList);
    visibleRef.value = true;
    const {
      results,
      meta: { sheetName },
    } = excelDataList[0];
    const columns = table.getColumns({ ignoreIndex: true });

    // 反转map
    const labelMap = {};
    columns.forEach((item) => {
      labelMap[item.title as string] = item.dataIndex;
    });
    tableListRef.title = sheetName;

    tableListRef.dataSource = results.map((item) => {
      let obj = {};
      Object.keys(item).forEach((key) => {
        if (labelMap[key]) {
          obj[labelMap[key]] = item[key];
        }
      });
      return obj;
    });
    loading.value = false;
    isUploaded.value = true;
  }
  function toImport() {
    isUploaded.value = false;
    visibleRef.value = false;
    table.insertTableDataRecord(BasicTableRef.value?.getDataSource() as Recordable<any>[]);
  }
  function importClick() {
    if (isUploaded.value) {
      visibleRef.value = true;
    } else {
      toCpnImport();
    }
  }
  function toCpnImport() {
    // loading.value = true;
    ImpExcelRef.value?.handleUpload();
  }
  function handleDelete(record) {
    BasicTableRef.value?.deleteTableDataRecord(record.key);
  }
</script>
<style lang="less" scoped></style>
